<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel=stylesheet type=text/css href="assets/css/studentIndex.css">
<title>管理学生信息（增、删、查、改、分页）</title>

<!-- CDN -->
<!-- DataTables CSS -->
<!-- 
<link rel="stylesheet" type="text/css"
	href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
-->
<!-- jQuery -->
<!-- 
<script type="text/javascript" charset="utf8"
	src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
-->
<!-- DataTables -->
<!-- 
<script type="text/javascript" charset="utf8"
	src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
-->

<!-- 本地 -->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="js/jquery.js"></script>

<!-- DataTables JS -->
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.js"></script>


<!-- Bootstrap CSS -->

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!-- Bootstrap JS -->

<script type="text/javascript" charset="utf8" src="js/bootstrap.min.js"></script>

<script src="plugin/date/bootstrap-datetimepicker.min.js"></script>

<script src="plugin/handlebars-v3.0.1.js"></script>

</head>
<body>
	<div class="myTitle" align="center">
		<h1>Duang学堂教育信息管理系统</h1>
	</div>
	<div class="container table-responsive">
		<!-- class="table-responsive"：设置响应式设计 -->
		<table id="example" class="table table-striped table-bordered">
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>学历</th>
					<th>备注</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
			<!-- tbody是必须的 -->
		</table>
	</div>
	<div id="myModal" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新增</h4>
				</div>
				<div id="modal-body" align="center">
					<div class="form-group">
						<input type="text" class="form-control" id="id"
							name="u.id" placeholder="ID">
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="username"
							name="u.username" placeholder="姓名">
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="gender"
							name="u.gender" placeholder="性别">
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="age" name="u.age"
							placeholder="年龄">
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="degree"
							name="u.degree" placeholder="学历">
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="remark"
							name="u.remark" placeholder="备注">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-info" id="initData">添加模拟数据</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="save">保存</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

<!--定义操作列按钮模板-->
<script id="tpl" type="text/x-handlebars-template">
{{#each func}}
<button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.id}}</button>
{{/each}}
</script>

<script type="text/javascript">
	var table;
	var editFlag = false;
	$(function() {
						//$("#start_date").datetimepicker();

						var tpl = $("#tpl").html();
						//预编译模板
						var template = Handlebars.compile(tpl);

						table = $('#example')
								.DataTable(
										{
											"processing" : true,
											"serverSide" : true,
											"ajax" : {
												"url" : "getAllStudent.action",
												"type" : "post"
											},
											"columns" : [ {
												"data" : "id"
											}, {
												"data" : "username"
											}, {
												"data" : "gender"
											}, {
												"data" : "age"
											}, {
												"data" : "degree"
											}, {
												"data" : "remark"
											}, {
												"data" : null
											} ],
											columnDefs : [ {
												targets : 6,
												render : function(a, b, c, d) {
													var context = {
														func : [
																{
																	"id" : "修改",
																	"fn" : "editData(\'"
																			+ c.id
																			+ "\',\'"
																			+ c.username
																			+ "\',\'"
																			+ c.gender
																			+ "\',\'"
																			+ c.age
																			+ "\',\'"
																			+ c.degree
																			+ "\',\'"
																			+ c.remark
																			+ "\')",
																	"type" : "primary"
																},
																{
																	"id" : "删除",
																	"fn" : "delData(\'"
																			+ c.id
																			+ "\')",
																	"type" : "danger"
																} ]
													};
													var html = template(context);
													return html;
												}
											}

											],
											"language" : { //语言国际化
												"lengthMenu" : "_MENU_ 条记录每页", //'每页显示记录'的下拉框的提示信息
												"zeroRecords" : "没有找到记录", //当搜索结果为空时，显示的信息
												"info" : "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )", //表格的page分页所需显示的所有字符串
												"infoEmpty" : "无记录", //当表格没有数据时，汇总地方显示的字符串
												"infoFiltered" : "(从 _MAX_ 条记录过滤)", //当表格搜索后，在汇总字符串上需要增加的内容
												"paginate" : { //分页信息显示所需的字符串的所有信息
													"previous" : "上一页", //分页信息的 'previous' 按钮显示的信息
													"next" : "下一页" //分页信息的 'next' 按钮显示的信息
												}
											},
											"dom" : "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>"
													+ //通过一个自定义的字符串来定义DataTables里面所有组件的显示,位置和显隐.
													"t"
													+ "<'row'<'col-xs-6'i><'col-xs-6'p>>",
											initComplete : function() {//初始化结束后的回调函数
												$("#mytool")
														.append(
																'<button id="datainit" type="button" class="btn btn-primary btn-sm">增加基础数据</button>&nbsp');
												$("#mytool")
														.append(
																'<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">添加</button>');
												$("#datainit").on("click",
														initData);
											}
										});
						$("#save").click(addData);

						$("#initData").click(initSingleData);
						console.log("结果ddddd");
					});

	/**
	 * 初始化基础数据
	 */
	function initData() {
		var flag = confirm("本功能将添加数据到数据库，你确定要添加么？");
		if (flag) {
			$.get("objects.txt", function(data) {
				var jsondata = JSON.parse(data);
				$(jsondata.data).each(function(index, obj) {
					ajax(obj);
				});
			});
		}
	}

	/**
	 * 初始化基础数据
	 */
	function initSingleData() {
		$("#id").val(1);
		$("#username").val("Inputting");
		$("#gender").val("男");
		$("#age").val("18");
		$("#degree").val("高中");
		$("#remark").val("( ^_^ )/~~拜拜");
	}

	/**
	 * 清除
	 */
	function clearData() {
		$("#id").val("").attr("disabled", false);
		$("#username").val("");
		$("#gender").val("");
		$("#age").val("");
		$("#degree").val("");
		$("#remark").val("");
		editFlag = false;
	}

	/**
	 * 添加数据
	 **/
	function addData() {
		var addJson = {
			"id" : $("#id").val(),
			"username" : $("#username").val(),
			"gender" : $("#gender").val(),
			"age" : $("#age").val(),
			"degree" : $("#degree").val(),
			"remark" : $("#remark").val()
		};

		ajax(addJson);
	}

	/**
	 *编辑方法
	 **/
	function editData(id,username, gender, age, degree, remark) {
		console.log(username);
		editFlag = true;
		$("#myModalLabel").text("修改");
		$("#id").val(id).attr("disabled", true);
		$("#username").val(username);
		$("#gender").val(gender);
		$("#age").val(age);
		$("#degree").val(degree);
		$("#remark").val(remark);
		$("#myModal").modal("show");
	}

	function ajax(obj) {
		var url = "addStudentJson.action";
		if (editFlag) {
			url = "editStudentJson.action";
		}
		$.ajax({
			url : url,
			data : {
				"id" : obj.id,
				"username" : obj.username,
				"gender" : obj.gender,
				"age" : obj.age,
				"degree" : obj.degree,
				"remark" : obj.remark
			},
			success : function(data) {
				table.ajax.reload();
				$("#myModal").modal("hide");
				$("#myModalLabel").text("新增");
				clear();
				console.log("结果" + data);
			}
		});
	}

	/**
	 * 删除数据
	 * @param name
	 */
	function delData(id) {
		$.ajax({
			url : "delStudentJson.action",
			data : {
				"id" : id
			},
			success : function(data) {
				table.ajax.reload();
				console.log("删除成功" + data);
			}
		});
	}
</script>








